<template>
  <div class="sys-main-content">
    <div class="col-content">
      <div class="sys-search">
        <el-input v-model="searchForm.configKey" placeholder="请输入键名" clearable />
        <el-button size="mini" type="primary" icon="el-icon-search" clearable @click="init">查询</el-button>
        <el-button size="mini" type="primary" clearable @click="addOrUpdate(undefined)">新增</el-button>
        <el-button :disabled="multipleSelection.length==0" size="mini" type="danger" clearable @click="batchDelete()">批量删除</el-button>
      </div>
      <div class="sys-table">
        <el-table :data="tableData" @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55"
          >
          </el-table-column>
          <el-table-column label="键名" prop="configKey" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="值名" prop="configValue" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="备注" prop="remark" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button type="text" @click="addOrUpdate(scope.row)">编辑</el-button>
              <el-button type="text" @click="removeConfig(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="sys-pagination">
        <el-pagination
          background
          :current-page="currentPage"
          :page-size="pageSize"
          layout="prev, pager, next,total"
          :total="totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="80px"
        label-position="right"
      >
        <el-form-item label="键名" align="center" prop="configKey">
          <el-input v-model="ruleForm.configKey" />
        </el-form-item>
        <el-form-item label="值名" align="center" prop="configValue">
          <el-input v-model="ruleForm.configValue" />
        </el-form-item>
        <el-form-item label="备注" align="center">
          <el-input v-model="ruleForm.remark" type="textarea" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getConfigList, configAddOrUpdate, removeConfigById } from '@/api/dict'
export default {
  name: 'Index',
  data() {
    return {
      ruleForm: {
        id: '',
        configKey: '',
        configValue: '',
        remark: ''
      },
      rules: {
        configKey: [
          { required: true, message: '请输入键名', trigger: 'change' }
        ],
        configValue: [
          { required: true, message: '请输入键值', trigger: 'change' }
        ]
      },
      dialogVisible: false,
      totalCount: 0,
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      searchForm: {
        configKey: ''
      },
      title: '',
      multipleSelection: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    batchDelete() {
      let ids = ''
      this.multipleSelection.forEach(r => {
        ids += r.id + ','
      })
      this.removeConfig(ids)
    },
    removeConfig(id) {
      this.$confirm('确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeConfigById(id).then((r) => {
          this.$message.success('操作成功')
          this.init()
        })
      })
    },
    addOrUpdate(row) {
      this.dialogVisible = true
      this.title = row ? '修改参数配置' : '新增参数配置'
      if (row) {
        this.ruleForm = row
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          configAddOrUpdate(this.ruleForm).then(() => {
            this.$message.success('操作成功')
            this.init()
            this.handleClose()
          })
        } else {
          return false
        }
      })
    },
    handleClose() {
      this.ruleForm = {}
      this.dialogVisible = false
      this.init()
      this.$nextTick(() => {
        this.$refs['ruleForm'].clearValidate()
      })
    },
    init() {
      getConfigList(
        {
          current: this.currentPage,
          size: this.pageSize,
          configKey: this.searchForm.configKey
        }
      ).then((r) => {
        this.tableData = r.list
        this.totalCount = r.totalCount
      })
    },
    // 每页多少条
    handleSizeChange(val) {
      this.pageSize = val
      this.init()
    },
    // 当前页
    handleCurrentChange(val) {
      this.currentPage = val
      this.init()
    }
  }
}
</script>

<style lang="scss" scoped>
.el-row {
  height: calc(100vh - 100px);
  .el-col {
    height: 100%;
  }
}
.col-content {
  height: calc(100vh - 100px)
}
</style>
